<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      @returnBack="$emit('returnModify')"
    >
      <template v-slot:full-button>
        <el-button @click="save()">保存</el-button>
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <basic-information
            :info="infoList"
            :label-width="infoList.labelWidth"
          ></basic-information>
        </div>
      </div>

      <div class="model-panel">
        <div class="model-panel-title">
          <Tooltip :text="$t('detailInfo')" />
        </div>
        <div class="model-panel-body">
          <!-- 条件栏 -->
          <div class="flex_full_item">
            <!-- 表格 -->
            <page-table
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :pager="false"
              :summary="true"
              :summary-field-list="tableInfo.summaryFieldList"
              :tab-index="true"
              :check-box="false"
              :field-list="tableInfo.fieldList"
              :handle="tableInfo.handle"
            >
            </page-table>
          </div>
        </div>
      </div>
    </NewFullScreen>
    <individual-details
      v-if="individualInfo.visible"
      v-model:show-dialog="individualInfo.visible"
      :query="individualInfo.query"
      :query-params="individualInfo.queryParams"
      :info="individualInfo.info"
      :api="individualInfo.api"
    />
  </div>
</template>

<script setup name="useReturnApplicationForRevoke">
import PageTable from '@/components/PageTable/index'
import {
  createUseReturnApplication,
  getUseReturnApplicationDetailCustomizeListByExport,
  getUseReturnApplicationFromExport,
} from '@/api/use'
import IndividualDetails from './IndividualDetails'
import BasicInformation from '@/components/BasicInformation/index'
import { getCustomizeSetting } from '@/api/customize'

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const Tooltip = defineAsyncComponent(() => import('@/components/Tooltip/index'))

const props = defineProps(['visible', 'title', 'id'])

const infoList = reactive({
  data: {},
  fieldList: [
    {
      label: '退回人',
      value: 'applicationUserName',
    },
    { label: '退出仓库', value: 'depotName' },
    {
      label: '退回部门',
      value: 'deptName',
    },
    { label: '退入仓库', value: 'storeDepotName' },
    {
      label: '退入部门',
      value: 'storeDeptName',
    },
    {
      label: '是否寄售业务',
      value: 'isConsignBusinessValue',
      type: 'text',
      show: proxy.$store.state.permission.systemConfig.is_consign_business == 1,
    },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
    },
  ],

  labelWidth: '120px',
})
// 过滤相关配置
const filterInfo = reactive({
  query: {
    customizeUserVO: {},
    queryMap: {},
    queryParams: {
      exportId: props.id,
    },
  },
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  map: new Map(),
  isSysGroup: true, //新增修改页是否有后端合并
  sysGroup: [], //新增修改页后端合并项
  selections: [],
  summaryFieldList: [
    { value: 'qty', formatter: proxy.$fn.qtyFormatter },
    { value: 'price', show: 'false' },
    { value: 'sumAmount', formatter: proxy.$fn.TripartiteMethod },
  ],
  fieldList: [],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '80',
    btList: [
      {
        label: '个体详情',
        event: showDetail,
        show: true,
      },
    ],
  },
})

const individualInfo = reactive({
  visible: false,
  api: getUseReturnApplicationDetailCustomizeListByExport,
  query: {},
  queryParams: {
    exportId: props.id,
  },
  info: {},
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

let obj = {
  orderNo: {
    label: '单号',
    value: 'orderNo',
    componentType: 'input',
    show: false,
    hidden: true,
  },
  price: {
    label: '单价',
    value: 'price',
    minWidth: '150px',
    type: 'column',
    formatter: proxy.$fn.TripartiteMethod,
    permission: !proxy.$permission('useReturnApplication:price'),
    hidden: true,
  },
  sumAmount: {
    label: '总金额',
    value: 'sumAmount',
    type: 'column',
    formatter: proxy.$fn.TripartiteMethod,
    permission: !proxy.$permission('useReturnApplication:price'),
    hidden: true,
  },
  defaultSupplierPrice: {
    label: '默认供应商价格',
    value: 'defaultSupplierPrice',
    type: 'column',
    permission: !proxy.$permission('useReturnApplication:price'),
    formatter: proxy.$fn.TripartiteMethod,
    hidden: true,
  },
}
tableInfo.fieldList = Object.values({
  ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
  ...obj,
})
getCustomize()

//个体详情
function showDetail(row) {
  let ids
  if (row.groupExportConcatIds) {
    //未定义表示没有分组条件
    ids = row.groupExportConcatIds
  } else {
    ids = '' + row.useExportOrderDetailId
  }
  individualInfo.query = {
    id: {
      queryType: 'IN',
      queryCategory: 'AND',
      value: ids,
    },
  }
  individualInfo.info = row
  individualInfo.visible = true
}
function getList() {
  //修改请求明细信息

  getUseReturnApplicationDetailCustomizeListByExport(filterInfo.query).then(
    (resp) => {
      if (resp && resp.success && resp.data.length) {
        let data = resp.data
        tableInfo.data = data
      }
    }
  )
}
function getMain() {
  getUseReturnApplicationFromExport(props.id).then((resp) => {
    if (resp && resp.success) {
      infoList.data = resp.data
      infoList.data.applicationUserName = proxy.$store.state.user.userInfo.user
        ? proxy.$store.state.user.userInfo.user.name
        : ''
      infoList.data.applicationUserId = proxy.$store.state.user.userInfo.user
        ? proxy.$store.state.user.userInfo.user.id
        : ''
    }
  })
  getList()
}
function getCustomize() {
  let param = {
    tableKey:
      'useReturnApplicationOrderModify-com.slip.spd.entity.vo.use.UseReturnApplicationOrderDetailVO',
  }
  tableInfo.isSysGroup = false
  getCustomizeSetting(param).then((res) => {
    if (res && res.success) {
      let data = res.data
      tableInfo.fieldList = proxy.$fn.setFieldList(
        tableInfo.fieldList,
        data.detail
      )
      filterInfo.query.customizeUserVO = data
      getMain()
    }
  })
}
//保存
function save() {
  let data = infoList.data
  let details = tableInfo.data.map((item) => {
    return {
      ...item,
      useExportOrderId: props.id,
    }
  })
  data.mergeDetails = proxy.$fn.filterBlacklist(details)
  createUseReturnApplication(data).then((res) => {
    if (res && res.success) {
      showDialog.value = false
      emit('returnModify')
    }
  })
}
</script>

<style scoped>
.inputRefScanHidden {
  position: absolute;
  color: transparent;
  background-color: transparent;
  caret-color: black;
  border: none;
  outline: none;
  height: 30px;
  margin-left: 115px;
  width: 200px;
  z-index: 12;
}
.inputScan {
  ime-mode: disabled;
}
.active {
  display: none;
}
</style>
